<template>
  <a-layout class="layout">
    <a-layout-header class="header">
      <a-menu
          v-model:selectedKeys="routeCheckKey"
          @select="menuChange"
          theme="dark"
          mode="horizontal"
          :style="{ lineHeight: '64px' }"
      >
        <SubMenu :menu-info="menuStore.menu"/>
      </a-menu>
      <div class="user">
        <a-avatar :src="filePathTransform(userStore.userInfo.avatar)"/>
        <a-dropdown overlayClassName="home-dropdown">
          <a class="ant-dropdown-link" @click.prevent>
            {{ userStore.userInfo.user_name }}
            <DownOutlined/>
          </a>
          <template #overlay>
            <a-menu>
<!--              todo: 个人信息修改待完成-->
<!--              <a-menu-item>-->
<!--                <a href="javascript:;" @click="showUpdateUserInfo = true">修改信息</a>-->
<!--              </a-menu-item>-->
              <a-menu-item>
                <a href="javascript:;" @click="logout">退出登录</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </a-layout-header>
    <a-layout-content class="home-content">
      <div :style="{ background: '#fff', padding: '24px' }">
        <RouterView/>
      </div>
    </a-layout-content>
  </a-layout>
  <a-modal v-model:visible="showUpdateUserInfo" title="修改信息" @ok="userinfoForm.commit()">
    <UserInfoForm ref="userinfoForm"/>
  </a-modal>
</template>
<script setup lang="tsx">
import {useMenuStore, useUserStore} from "@/stores/user";
import SubMenu from "@/components/HomeView/SubMenu.vue";
import UserInfoForm from '@/components/HomeView/UserInfo.vue'
import {useRoute, useRouter,onBeforeRouteUpdate} from "vue-router";
import {ref} from "vue";
import {filePathTransform} from '@/utils'
import {DownOutlined} from '@ant-design/icons-vue';

const menuStore = useMenuStore();
const userStore = useUserStore();
const $route = useRoute()
const $router = useRouter()
const routeCheckKey = ref([$route.name]);

onBeforeRouteUpdate((to) =>{
  routeCheckKey.value[0] = to.name;
});

const menuChange = ({key}: any) => {
  $router.push({name: key})
}

const logout = () =>{
  localStorage.removeItem('token');
  document.cookie = 'authorization='
  $router.replace('/login');
}

const showUpdateUserInfo = ref(false);

const userinfoForm = ref();

</script>
<style lang="less" scoped>
.header {
  position: relative;

  .user {
    position: absolute;
    top: 0;
    right: 32px;
  }
  :deep(.user){
    .ant-avatar{
      margin-right: 12px;
    }
    .ant-dropdown-link{
      color: #fff;
    }
  }
}
.home-content{
  padding: 30px;
  height: calc(100vh - 64px);
  &>div{
    height: 100%;
  }
}
:global(.home-dropdown){
  top: 54px !important;
}
</style>